<template>
	<el-dialog v-model="visible" :title="'选择员工'" :close-on-click-modal="false">
		<el-form :inline="true" :model="state.queryForm" @keyup.enter="fn()">
			<!-- 选择池子 -->
			<el-form-item prop="name" style="width: 100%">
				<el-card class="card--">
					<span v-for="(item, i) in staffList" class="card-span">
						<el-button type="primary" class="card-t">{{ item.name }}</el-button>
						<el-button type="danger" class="card-x" @click="OffStaff(item.id)">X</el-button>
					</span>
				</el-card>
			</el-form-item>
		</el-form>

		<!-- 查询框 -->
		<el-input v-model="state.queryForm.name" placeholder="请输入关键字" clearable>
			<template #append>
				<el-button :icon="Search" @click="fn()" />
			</template>
		</el-input>
		<div style="margin-bottom: 20px"></div>

		<!-- 面包屑 -->
		<div class="example-container">
			<el-breadcrumb separator=">">
				<el-breadcrumb-item v-for="(item, index) in breadList" :key="index">{{ item.name }}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<br />

		<!-- 组织查询树 -->
		<el-table
			v-loading="dataListLoading"
			:data="ziChanList"
			style="width: 100%"
			@selection-change="selectionOrgStaff"
			:show-header="false"
			@row-click="checkOrgStaff"
		>
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="name" label="" header-align="left"></el-table-column>
		</el-table>
	</el-dialog>
</template>

<style scoped>
.card-- {
	height: 100px;
	width: 100%;
	overflow-y: scroll;
	border: 1px #b7b7b7 dashed;
}
.card-x {
	margin: 0px 10px 0px 0px;
	width: 1px;
	display: none;
}

.card-span button {
	margin-right: 10px;
}
.card-span:hover {
	.card-t {
		margin-right: 0px;
	}
	.card-x {
		display: inline-grid;
		margin-right: 10px;
	}
}
</style>
<script setup lang="ts" name="StaffFindOrgStaffIndex">
import { reactive, ref } from 'vue'

import { Search } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'

import { findChildList } from '@/api/nb/organization/organization'

const emit = defineEmits(['refreshDataList'])

const visible = ref(false)
const state = ref({
	queryForm: { name: '' }
})

const init = () => {
	fn()
	visible.value = true
}

const fn = () => {
	console.info('123123')
}

//组织机构 层级轨迹
const breadList = reactive([{ name: '' }])
const ziChanList = ref()
const fnOrg = (id: number) => {
	findChildList(id)
		.then(res => {
			ziChanList.value = res.data
		})
		.then(res => {
			if (id === 0) {
				fnBuild()
			}
		})
}

const fnBuild = () => {
	let org = (ziChanList.value as Array<any>)[0]
	breadList[0] = { name: (ziChanList.value as Array<any>)[0].name }
	fnOrg(org.id)
}
fnOrg(0)

const selectionOrgStaffArr = new Set<Name>()
const selectionOrgStaff = (row: any) => {
	for (let i = 0; i < row.length; i++) {
		if (row[i].type == 2) {
			selectionOrgStaffArr.add(row[i])
		}
	}
	fnArr()
}
const fnArr = () => {
	console.info(selectionOrgStaffArr)
	staffList = reactive<Name[]>([])
	selectionOrgStaffArr.forEach(row => {
		staffList.push({ name: row.name, id: row.id })
	})
	console.info(staffList)
}
const checkOrgStaff = (row: any) => {
	if (row.type == 2) {
		selectionOrgStaffArr.add(row)
	} else {
		breadList.push({ name: row.name })
		fnOrg(row.id)
	}
	fnArr()
}

type Name = {
	name: string
	id: number
}
let staffList = reactive<Name[]>([])

// 是否重新渲染表格状态
const refreshTable = ref(true)
const dataListLoading = ref(false)

//关闭 员工标签
const OffStaff = (id: number) => {
	ElMessageBox.confirm('确定进行删除操作?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			let aa = staffList.filter(item => {
				return item.id != id
			})

			staffList = aa
		})
		.catch(() => {})
}

defineExpose({
	init
})
</script>
